<template>
	<div class="build-model">
		<div class="model-content">
			<!-- 弹框头部 -->
			<div class="alarm-close pointer" @click="closeDialog">
				<i class="el-icon-close"></i>
			</div>
			<div class="alarm-title">
				<span class="title-text">建筑详情</span>
			</div>
			<!-- build-content -->
			<div class="build-content">
				<!-- 建筑消防安全得分板块 -->
				<div class="build-score">
					<!-- 标题部分 -->
					<div class="score-title">建筑消防安全得分</div>
					<!-- 得分描述板块 -->
					<div class="score-info">
						<div class="info-left">
							<!-- 得分背景tupian -->
							<img src="../../static/img/score.png" class="left-img" alt="" />
							<!-- 左边得分板块 -->
							<div class="left-score">
								<span class="score-num">{{scoreObj.fraction }}</span>
								<span class="score-text">分</span>
							</div>
						</div>
						<div class="info-right">
							<!-- 等级板块 -->
							<div class="right-level">
								<span>风险等级:</span>
								<span style="color: rgba(254, 169, 64, 1);">{{ scoreObj.safetyLevel }}</span>
							</div>
							<!-- 时间板块 -->
							<div class="right-time">
								<span>评估时间:</span>
								<span>{{ scoreObj.assessmentTime }}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 评估记录板块 -->
				<div class="record-history">
					<!-- 标题板块 -->
					<div class="history-title">评估记录</div>
					<!-- 帅选板块 -->
					<div class="history-filter">
						<el-date-picker v-model="daterage" style="width: 23%; height: 30px,background:rgba(0,0,0.0.3)"
							size="mini" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期"
							end-placeholder="结束日期" @change="dateChange">
						</el-date-picker>
						<el-input v-model="serchParams.assessorName" placeholder="请输入评估成员"
							style="width: 15%; margin-left: 20px"></el-input>
						<el-input v-model="serchParams.deptName" placeholder="请输入评估单位"
							style="width: 15%; margin: 0 20px">
						</el-input>
						<button class="btn" @click="serchData">搜索</button>
						<button class="btn" @click="reset">重置</button>
					</div>
					<!-- 表格部分 -->
					<!-- 表格展示部分 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">安全评估得分</uni-th>
							<uni-th align="left">评估单位</uni-th>
							<uni-th align="left">评估成员</uni-th>
							<uni-th align="left">评估时间</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in tableData" :key="item.messageId">
							<uni-td>{{item.fraction}}</uni-td>
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.assessorName}}</uni-td>
							<uni-td>{{item.assessmentTime}}</uni-td>
						</uni-tr>

					</uni-table>
					<div class="pagination" v-if="total>=1">
						<page-pagination :total="total" :pageSize="4" :currentPage="1" @change="changePageation">
						</page-pagination>
					</div>
				</div>
				<!-- 建筑基本情况 -->
				<div class="situation-title">基本情况:</div>
				<div class="basic-situation">
					<div class="situation-item">
						<span class="rtitle">所属单位:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.name }}</span>
					</div>
					<div class="situation-item">
						<span class="rtitle">建筑名称:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingName }}</span>
					</div>
					<div class="situation-item">
						<span class="rtitle">建筑地址:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingAddress }}</span>
					</div>
					<div class="situation-item">
						<span class="rtitle">所在区域:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.areaName }}</span>
					</div>
					<div class="situation-item">
						<span style="padding-left: 13px;">竣工时间:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.acceptanceTime }}</span>
					</div>
					<div class="situation-item">
						<span style="padding-left: 13px;">建造时间:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.designApprovalTime }}</span>
					</div>
					<div class="situation-item">
						<span style="padding-left: 13px;">维保单位:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.maintenanceUnit }}</span>
					</div>
				</div>
				<!-- 地理信息板块 -->
				<div class="geographic-message">
					<div class="message-title">地理信息:</div>
					<div class="message-location">
						<span class="rtitle">地理位置:</span>
						<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingAddress }}</span>
						<img src="../../static/img/marker.png" alt="" @click='toShowMarker' class="pointer" />
					</div>
					<div class="message-info">
						<div class="info-item">
							<span style="padding-left: 10px;">详细地址:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.detailedAddress }}</span>
						</div>
						<div class="info-item">
							<span>路名:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.wayName }}</span>
						</div>
						<div class="info-item">
							<span>楼栋幢:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{buildObj.floorName}}</span>
						</div>
						<div class="info-item" style="padding-left: 10px;">
							<span> 6位行政区编码:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.provinceCode }}</span>
						</div>
						<div class="info-item">
							<span>3位街道编码:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.wayCode }}</span>
						</div>
					</div>
					<!-- 建筑信息板块 -->
					<div class="build-info">
						<div class="info-title">建筑信息:</div>
						<div class="info-all">
							<div class="info-item">
								<span class="rtitle">建筑高度:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingHeight }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">建筑面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingArea }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">建筑分类:</span>
								<span
									style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingClassificationName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">建筑结构:</span>
								<span
									style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingStructureName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">耐火等级:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.fireResistanceName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">危险等级:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.hazardLevelName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">消控室:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.firecontrolRoomName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">消控室位置:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.firecontrolAddress }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">建筑使用情况:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.buildingRightName }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">地下层数:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.underNumber }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">产权及使用情况:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.propertyRightName }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">地上层数:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.onNumber }}</span>
							</div>
							<div class="info-item">
								<span class="rtitle">设施完好情况:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.facilitiesGoodName }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">标准层面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.areaStandard }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">建筑用途分类:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.buildingUse }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">占地面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.areaCovered }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">地上面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.onArea }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">地下面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.underArea }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">避难层数量:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.refugeNumber }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">避难层面积:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.refugeArea }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">避难层位置:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.refugeAddress }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">消防电梯数:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.fireElevator }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">消防电梯位置:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.fireAddress }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">入住使用功能:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.checkFunction }}</span>
							</div>

							<div class="info-item">
								<span style="padding-left: 10px;">最大容纳人数:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.maxNumber }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">自动消防设施:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.automaticFireName }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">建筑类型:</span>
								<span
									style="color: rgba(255, 255, 255, 0.9);">{{buildTypeList[buildObj.buildType]}}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">消防设计审核日期:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.designApprovalTime }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">消防验收日期:</span>
								<span style="color: rgba(255, 255, 255, 0.9);"> {{ buildObj.acceptanceTime }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">消防设施:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.fightingNames }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">毗邻建筑情况:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.adjacentBuilding }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">地理情况:</span>
								<span style="color: rgba(255, 255, 255, 0.9);">{{ buildObj.geography }}</span>
							</div>
							<div class="info-item">
								<span style="padding-left: 10px;">场所外观:</span>

							</div>
							<div class="current-img">
								<img v-for="(item,index) in buildObj.imageList" :key="index"
									:src="baseUrl+'/admin/sys-file/'+item" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>

			<marker-model :latLud=buildObj.latLud v-if="isMarkerShow" @isCloseMarker='isCloseMarker'></marker-model>
		</div>
	</div>
</template>

<script>
	import deviceApi from "@/api/device.js"
	import MarkerModel from "../../component/model/markerModel.vue"
	export default {
		components: {
			MarkerModel
		},
		props: {
			buildShow: {
				type: Boolean,
				default: true
			},
			deptId: {
				type: Number,
				default: 0
			},
			buildId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				recordList: [],
				scoreObj: {},
				buildObj: {},
				serchParams: {
					startTime: "",
					endTime: "",
					assessorName: "",
					deptName: "",
					buildId: this.buildId,
					pageSize: 4,
					pageNum: 1
				},
				daterage: [],
				total: '',
				zoom: 14,
				markers: {
					position: [121.5273285, 31.21515044],
					visible: true
				},
				mapCenter: [116.602489, 40.080734],
				mwindows: {
					position: [116.602489, 40.080734],
					content: ""
				},
				mapevents: {

				},
				slotStyle: {
					color: '#3993F8'
				},
				tableData: [],
				isMarkerShow: false,
				currentPageNum: 1,
				buildTypeList: ['大型综合商业体', '厂房（甲、乙类）', '其他厂房', '仓库', '其他民用建筑'],
				baseUrl: uni.getStorageSync('urlText')

			};
		},
		created() {
			//请求建筑的评估分数

			this.$api.getBuildingScore({
				buildId: this.buildId
			}).then(res => {
				if (res.data.fraction) {
					this.scoreObj.fraction = res.data.fraction
				} else {
					this.scoreObj.fraction = 0
				}
				if (res.data.safetyLevel) {
					this.scoreObj.safetyLevel = res.data.safetyLevel
				} else {
					this.scoreObj.safetyLevel = '暂无风险等级'
				}
				if (res.data.assessmentTime) {
					this.scoreObj.assessmentTime = res.data.assessmentTime
				} else {
					this.scoreObj.assessmentTime = '--'
				}
			})

			this.$api.getNewBuildPopup({
				buildingId: this.buildId,
				deptId: this.deptId
			}).then((res) => {

				this.buildObj = res.data
				if (!this.buildObj.fightingNames) {
					this.buildObj.fightingNames = ''
				} else {
					this.buildObj.fightingNames = this.buildObj.fightingNames.join(',')
				}
				if (this.buildObj.latLud) {
					//初始化地图
					this.$nextTick(() => {
						this.firstPlace(this.buildObj.latLud)
					})
				}
			});
			this.getRecordPage();
		},
		methods: {

			//评估记录分页
			getRecordPage() {
				this.$api.getSafetyHistory(this.serchParams).then((res) => {
					this.tableData = res.data.list;
					this.total = res.data.total
				});
			},
			// 监听日期选择
			dateChange(val) {
				if (val && val.length) {
					this.serchParams.startTime = val[0] + " 00:00:00";
					this.serchParams.endTime = val[1] + " 23:59:59";
				} else {
					this.searchParams.startTime = "";
					this.searchParams.endTime = "";
				}
			},
			//点击确定筛选评估记录
			sureFilter() {

			},
			//点击分页器每页显示条数

			firstPlace(pos) {
				let self = this;
				let plceposi = [parseFloat(pos.split(",")[0]), parseFloat(pos.split(",")[1])];
				let placemap = new AMap.Geocoder({
					radius: 1000,
					extensions: "all"
				});
				placemap.getAddress(pos.split(","), function(status, result) {
					if (status === 'complete' && result.info === 'OK') {
						if (result && result.regeocode) {
							self.mapCenter = plceposi;
							self.markers.position = plceposi;
							self.mwindows.position = [parseFloat(self.markers.position[0]), parseFloat(self.markers
								.position[1])];
						}
					}
				});
			},
			closeDialog() {
				this.$emit('isBuildShow', false)
			},
			toShowMarker() {
				this.isMarkerShow = true
			},
			isCloseMarker(val) {
				this.isMarkerShow = false
			},
			changePageation(val) {
				this.serchParams.pageNum = val
				this.getRecordPage()
			},
			serchData() {
				this.getRecordPage()
			},
			reset() {
				this.serchParams.assessorName = ''
				this.serchParams.deptName = ''
				this.daterage = []
				this.serchParams.startTime = ''
				this.serchParams.endTime = ''
				this.getRecordPage()
			}

		}
	};
</script>

<style lang="scss" scoped>
	.build-model {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1500;
		overflow-y: auto;

		.model-content {
			padding-bottom: 50px;
			position: absolute;
			left: 50%;
			top: 5%;
			transform: translate(-50%, 0%);
			width: 63%;
			// height: 100%;
			background: #01192E;
			// overflow: auto;
			z-index: 3;

		}
	}

	//弹框关闭按钮
	.alarm-close {
		top: 20px;
		right: 20px;
		font-size: 30px;
		width: 17px;
		height: 19px;
		color: #3de6ff;
		position: absolute;
		z-index: 1001;
	}


	.alarm-title {
		margin-top: 29px;
		font-size: 18px;
		text-align: center;
		position: relative;

		.title-text {

			font-size: 18px;
			color: #3de6ff;
		}

	}

	.alarm-title::after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		top: 40px;
		opacity: 0.1;
		border: 1px solid #1ACFFF;
	}

	.build-content {
		padding: 0 50px;
	}

	//建筑消防安全评估得分
	.build-score {
		margin-top: 38px;

		.score-title {
			font-size: 18px;
			color: rgba(61, 230, 255, 1);
		}

		.score-info {
			margin-top: 37px;
			display: flex;

			.info-left {
				position: relative;

				.left-img {
					width: 1.45rem;
					height: 1.45rem;
				}

				.left-score {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					// display: flex;

					// display: flex;
					// justify-content: center;
					// align-items: center;
					.score-num {
						font-size: 24px;
						color: #fff;
					}

					.score-text {
						color: #fff;
					}
				}
			}

			.info-right {
				margin: 20px 0px 0px 14px;

				.right-level {
					color: #fff;
					font-size: 18px;
					margin-bottom: 10px;
				}

				.right-time {
					color: rgba(255, 255, 255, 0.7);
					font-size: 14px;
				}
			}
		}
	}

	//评估记录板块
	.record-history {
		margin-top: 50px;

		.history-title {
			color: #3de6ff;
			font-size: 18px;
		}

		.history-filter {
			display: flex;
			justify-content: flex-end;
		}

		.btn {
			width: 53px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: rgba(2, 195, 255, 1);
			color: #fff;
			font-size: 14px;
			margin-right: 10px;
		}

		.btn::after {
			border: none;

		}
	}

	//输入框样式
	::v-deep .el-input--medium .el-input__inner {
		height: 30px;
	}

	.el-range-editor--medium.el-input__inner {
		height: 30px;
	}

	//基本情况板块
	.situation-title {
		margin-top: 60px;
		color: #3de6ff;
		font-size: 18px;
	}

	.basic-situation {
		padding-left: 40px;
		display: flex;
		flex-wrap: wrap;

		.situation-item {
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			width: 33%;
			color: rgba(255, 255, 255, 0.5);
			font-size: 14px;
			margin: 10px 0;

			span {
				margin-right: 10px;
			}
		}
	}

	.geographic-message {
		margin-top: 50px;

		.message-title {
			color: #3de6ff;
			font-size: 18px;
		}

		.message-location {
			padding-left: 30px;
			color: rgba(255, 255, 255, 0.5);
			font-size: 14px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			// margin-bottom: 20px;
		}

		.map-wrap {
			margin: 0 auto;
			width: 97%;
			height: 200px;
		}

		.message-info {
			padding-left: 30px;
			display: flex;
			color: rgba(255, 255, 255, 0.5);
			font-size: 14px;
			flex-wrap: wrap;

			.info-item {
				width: 33%;
				margin-top: 20px;

				span {
					margin-right: 10px;
				}
			}
		}
	}

	//建筑信息板块
	.build-info {
		margin-top: 50px;

		.info-title {
			color: #3de6ff;
			font-size: 18px;
		}

		.info-all {
			padding-left: 30px;
			display: flex;
			flex-wrap: wrap;

			.info-item {
				width: 33%;
				color: rgba(255, 255, 255, 0.5);
				font-size: 14px;
				margin-top: 20px;

				span {
					margin-right: 10px;
				}
			}

			.current-img {
				img {
					margin: 20px 10px 0 0;
					width: 30%;
				}
			}
		}
	}

	//修改表格每行选中的颜色
	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background: rgba(0, 63, 112, 0.2);
	}

	//表格背景色
	::v-deep .el-table th.el-table__cell {
		background-color: rgba(0, 63, 112, 0.2);
	}

	::v-deep .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: 1px solid rgba(61, 230, 255, 0.3);
	}

	//改变表格字体大小
	.el-table {
		font-size: 18px;
	}

	//改变分页器的位置
	::v-deep .el-pagination {
		display: flex;
		justify-content: flex-end;
		font-size: 20px;
		margin-top: 20px;
		padding-right: 5%;
	}

	//改变表格每行的行高
	:deep .el-table--medium .el-table__cell {
		padding: 30px 0;
	}

	:deep .el-table th.el-table__cell.is-leaf {
		border: 0px;
	}

	.rtitle {
		&::before {
			content: "*";
			color: #ff3d3d;
			margin-right: 4px;
		}
	}

	::v-deep .el-range-editor--mini .el-range-separator {
		line-height: 35px;
		font-size: 30px;
	}

	::v-deep.el-date-editor .el-range-input,
	.el-date-editor .el-range-separator {
		background-color: rgba(0, 0, 0, 0.3);
	}

	::v-deep .page-pagination .page-con {
		margin-top: 20px;
		height: 60px;
		display: flex;
		justify-content: flex-end;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn {
		margin-right: 20px;
		width: 35px;
		height: 35px;
		border-radius: 35px;
		color: #fff !important;
		padding: 0;
		text-align: center;
		border: none !important;
		line-height: 35px;
		background-color: rgba(0, 85, 157, 0.1000);
		// margin: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn:first-child {
		border: none;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.prev {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.next {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.active {
		background-color: rgba(2, 195, 255, 1) !important;
		color: #fff;
	}

	::v-deep .page-pagination .page-con .page-scroll {
		margin: 0;
	}

	.uni-table-td {
		color: rgba(255, 255, 255, 0.7);
	}

	.uni-table-th {
		color: rgba(255, 255, 255, 1);
	}

	.pagination {
		position: fixed;
		right: 20px;

	}

	::v-deep .el-date-editor .el-range-separator {
		height: 36px;
		width: 18%;
	}

	::v-deep .el-date-editor .el-range-input {
		width: 33%;
	}

	.uni-table-th {
		color: rgba(255, 255, 255, 1);
		font-family: 'PingFangSC-Medium';
	}

	::v-deep .el-date-range-picker .el-picker-panel__content {
		background: rgba(0, 125, 219, 0.14);
	}

	::v-deep .el-picker-panel .el-date-table td span {
		background-color: rgba(0, 125, 219, 0.14);
	}

	.uni-table-td {
		color: rgba(255, 255, 255, 0.7);
		border-bottom: 1px solid rgba(2, 195, 255, 0.25);
		padding: 13px 10px;
	}

	//取消表格空数据时取消右边框
	::v-deep .empty-border {
		border: none;
	}

	::v-deep .el-picker-panel .el-date-table td span {
		background-color: rgba(0, 0, 0, 0);
	}

	::v-deep .el-range-editor--mini.el-input__inner {
		height: 30px;
	}

	::v-deep .el-input--medium .el-input__inner {
		font-size: 12px !important;
	}
</style>